<template>
  <div class="couponsList">
    <div class="couponsTitle">
      <p :class="{ activetit: curId == 1 }" @click="changePage(1)">通用劵</p>
      <p :class="{ activetit: curId == 2 }" @click="changePage(2)">商用劵</p>
      <p :class="{ activetit: curId == 3 }" @click="changePage(3)">品类劵</p>
    </div>
    <div class="couponsCon">
      <div class="coupons-text" v-for="item in coupons" :key="item.id">
        <div class="discount">
          <span><em>￥</em>{{ item.money }}</span>
          <p>满{{ parseInt(item.minPrice) }}可用</p>
        </div>
        <div class="info">
          <p class="info-top">
            <span class="info-name">通用</span><span>{{ item.name }}</span>
          </p>
          <p class="receive-con">
            <span class="receive">领取{{ item.day }}后可用</span>
            <span class="receiveBtn" v-if="item.isUse">已领取</span>
            <span class="receiveBtn" v-else>立即领取</span>
          </p>
        </div>
      </div>
      <!-- 底部提示 -->
      <div class="bottom-tip">
        <p>我也是有底线的</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "CouponsList",

  data() {
    return {
      curId: 1, // 高亮
      coupons: [], // 优惠卷
      // type:1, // 默认显示第一个页面
    };
  },

  methods: {
    changePage(id) {
      this.curId = id;
      this.$requestTools(`/crmeb/coupons?page=1&limit=20&type=${this.curId}`).then(
        (data) => {
          this.coupons = data.data;
        }
      );
    },
  },

  created() {
    this.$requestTools(`/crmeb/coupons?page=1&limit=20&type=1`).then((data) => {
      this.coupons = data.data.data;
    });
  },
};
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
.couponsList {
  height: 100vh;
  overflow: hidden;
  background-color: #eee;
  .couponsTitle {
    height: 52px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: #fff;
    .activetit {
      color: #ff448f;
      position: relative;
      &::after {
        content: "";
        width: 100%;
        height: 2px;
        position: absolute;
        bottom: -13px;
        left: 0;
        background-color: #ff448f;
      }
    }
  }
  .couponsCon {
    padding: 0 15px;
    height: calc(100vh - 50px);
    overflow-y: scroll;
    &::-webkit-scrollbar {
      display: none;
    }
    .coupons-text {
      margin-top: 10px;

      background: #fff;
      display: flex;
      justify-content: space-between;
      .discount {
        width: 120px;
        height: 85px;
        background-image: url(./../assets/images/index-bg.png);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: #fff;
        font-weight: bold;
        span {
          font-size: 28px;
          em {
            font-size: 14px;
            font-style: normal;
          }
        }
        p {
          font-size: 14px;
        }
      }
      .info {
        width: 60%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 10px 10px 10px 0;
        box-sizing: border-box;
        .info-top {
          span {
            color: #282828;
            font-size: 13px;
          }
          .info-name {
            font-size: 10px;
            color: gray;
            border: 1px solid gray;
            border-radius: 6px;
            padding: 2px 4px;
            margin-right: 10px;
          }
        }
        .receive-con {
          display: flex;
          justify-content: space-between;
          align-items: center;
          .receive {
            font-size: 12px;
            color: #999;
          }
          .receiveBtn {
            width: 68px;
            height: 22px;
            background-color: #ccc;
            color: #fff;
            font-size: 14px;
            text-align: center;
            // padding:5px 10px;
            border-radius: 11px;
          }
        }
      }
    }
  }
  .bottom-tip {
    p {
      font-size: 14px;
      color: #333;
      text-align: center;
      padding: 20px 0;
    }
  }
}
</style>
